import { useState, useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { registerTeacher } from '@/services/teacher';
import { fetchCSRFToken } from '@/utils/csrf';
import '@/styles/pages/auth.scss';

const Register = () => {
  const navigate = useNavigate();
  
  const [teacherId, setTeacherId] = useState('');
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  
  // 页面加载时获取CSRF令牌
  useEffect(() => {
    fetchCSRFToken();
  }, []);
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    
    if (!teacherId.trim()) {
      setError('请输入教师号');
      return;
    }
    
    if (!name.trim()) {
      setError('请输入姓名');
      return;
    }
    
    if (!password) {
      setError('请输入密码');
      return;
    }
    
    if (password !== confirmPassword) {
      setError('两次输入的密码不一致');
      return;
    }
    
    try {
      setLoading(true);
      const res = await registerTeacher(teacherId, name, password);
      
      if (res.code === 0) {
        alert('注册成功，请登录');
        navigate('/login');
      } else {
        setError(res.msg || '注册失败');
      }
    } catch (err: any) {
      setError(err.message || '网络错误，请稍后重试');
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <div className="auth-container">
      <div className="auth-form-box">
        <h2 className="title">智慧课堂教师注册</h2>
        
        {error && <div className="error-message">{error}</div>}
        
        <form className="auth-form" onSubmit={handleSubmit}>
          <div className="form-item">
            <label htmlFor="teacherId">教师号</label>
            <input
              type="text"
              id="teacherId"
              value={teacherId}
              onChange={(e) => setTeacherId(e.target.value)}
              placeholder="请输入教师号"
            />
          </div>
          
          <div className="form-item">
            <label htmlFor="name">姓名</label>
            <input
              type="text"
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="请输入姓名"
            />
          </div>
          
          <div className="form-item">
            <label htmlFor="password">密码</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
            />
          </div>
          
          <div className="form-item">
            <label htmlFor="confirmPassword">确认密码</label>
            <input
              type="password"
              id="confirmPassword"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder="请再次输入密码"
            />
          </div>
          
          <button 
            className="btn btn-primary submit-btn" 
            type="submit"
            disabled={loading}
          >
            {loading ? '注册中...' : '注册'}
          </button>
        </form>
        
        <div className="auth-footer">
          <span>已有账号？</span>
          <Link to="/login">立即登录</Link>
        </div>
      </div>
    </div>
  );
};

export default Register; 